<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的主页 - 暖言树洞</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-gray-50 font-sans text-gray-800">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md fixed w-full z-10 top-0">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fas fa-tree text-green-500 text-2xl"></i>
                <span class="text-xl font-bold text-green-600">暖言树洞</span>
            </div>
            <div class="hidden md:flex space-x-6">
                <a href="index.html" class="text-gray-700 hover:text-green-500 transition-colors">首页</a>
                <a href="diary.html" class="text-gray-700 hover:text-green-500 transition-colors">心情日记</a>
                <a href="drift.html" class="text-gray-700 hover:text-green-500 transition-colors">漂流瓶</a>
                <a href="mall.html" class="text-gray-700 hover:text-green-500 transition-colors">公益商城</a>
            </div>
            <div class="flex items-center space-x-4">
                <a href="profile.html" class="text-green-500">
                    <i class="fas fa-user-circle text-xl"></i>
                </a>
                <button class="md:hidden text-gray-700">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 pt-24 pb-24">
        <div class="max-w-3xl mx-auto">
            <!-- 用户信息头部 -->
            <div class="bg-gradient-to-r from-green-500 to-blue-500 rounded-2xl p-8 text-white mb-8 relative overflow-hidden">
                <div class="absolute top-0 right-0 w-64 h-64 bg-white opacity-10 rounded-full -mr-32 -mt-32"></div>
                <div class="absolute bottom-0 left-0 w-40 h-40 bg-white opacity-10 rounded-full -ml-20 -mb-20"></div>
                <div class="relative z-10 flex flex-col md:flex-row items-center">
                    <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="w-24 h-24 rounded-full border-4 border-white shadow-lg mb-4 md:mb-0 md:mr-6">
                    <div class="text-center md:text-left">
                        <h1 class="text-2xl md:text-3xl font-bold mb-2">暖心用户</h1>
                        <p class="opacity-90 mb-4">用温暖的话语，点亮彼此的世界</p>
                        <div class="flex flex-wrap justify-center md:justify-start gap-4">
                            <div class="text-center">
                                <div class="text-2xl font-bold">128</div>
                                <div class="text-sm opacity-90">获赞总数</div>
                            </div>
                            <div class="text-center">
                                <div class="text-2xl font-bold">36</div>
                                <div class="text-sm opacity-90">暖心货币</div>
                            </div>
                            <div class="text-center">
                                <div class="text-2xl font-bold">8</div>
                                <div class="text-sm opacity-90">公益热力值</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 导航选项卡 -->
            <div class="bg-white rounded-xl shadow-md mb-8">
                <div class="flex border-b">
                    <button class="tab-btn active flex-1 py-4 px-2 text-center font-medium text-green-500 border-b-2 border-green-500">我的日记</button>
                    <button class="tab-btn flex-1 py-4 px-2 text-center font-medium text-gray-500 hover:text-gray-700">我的点评</button>
                    <button class="tab-btn flex-1 py-4 px-2 text-center font-medium text-gray-500 hover:text-gray-700">公益记录</button>
                </div>

                <!-- 我的日记内容 -->
                <div class="tab-content p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-xl font-semibold">我的日记</h2>
                        <a href="diary.html" class="text-green-500 hover:text-green-600 flex items-center">
                            <i class="fas fa-plus-circle mr-1"></i> 写新日记
                        </a>
                    </div>

                    <!-- 日记列表 -->
                    <div class="space-y-4">
                        <!-- 日记项1 -->
                        <div class="diary-card">
                            <div class="flex justify-between items-start mb-2">
                                <h3 class="text-lg font-medium">今天的小确幸</h3>
                                <span class="text-sm text-gray-500">2小时前</span>
                            </div>
                            <p class="text-gray-600 mb-3 line-clamp-2">今天收到了朋友送的小礼物，虽然不贵重但很贴心。生活中的这些小确幸，就像冬日里的阳光，温暖人心。</p>
                            <div class="flex justify-between items-center">
                                <div class="flex items-center space-x-4">
                                    <span class="text-sm text-gray-500"><i class="fas fa-heart text-red-500 mr-1"></i> 12</span>
                                    <span class="text-sm text-gray-500"><i class="fas fa-comment text-blue-500 mr-1"></i> 3</span>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="text-gray-400 hover:text-gray-600 p-1"><i class="fas fa-edit"></i></button>
                                    <button class="text-gray-400 hover:text-gray-600 p-1"><i class="fas fa-trash"></i></button>
                                </div>
                            </div>
                        </div>

                        <!-- 日记项2 -->
                        <div class="diary-card">
                            <div class="flex justify-between items-start mb-2">
                                <h3 class="text-lg font-medium">雨后的彩虹</h3>
                                <span class="text-sm text-gray-500">昨天</span>
                            </div>
                            <p class="text-gray-600 mb-3 line-clamp-2">今天下了一场大雨，本以为心情会和天气一样阴沉。没想到雨后竟然出现了彩虹，真的太美了！生活也是这样，经历过风雨才能见到彩虹。</p>
                            <div class="flex justify-between items-center">
                                <div class="flex items-center space-x-4">
                                    <span class="text-sm text-gray-500"><i class="fas fa-heart text-red-500 mr-1"></i> 24</span>
                                    <span class="text-sm text-gray-500"><i class="fas fa-comment text-blue-500 mr-1"></i> 7</span>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="text-gray-400 hover:text-gray-600 p-1"><i class="fas fa-edit"></i></button>
                                    <button class="text-gray-400 hover:text-gray-600 p-1"><i class="fas fa-trash"></i></button>
                                </div>
                            </div>
                        </div>

                        <!-- 日记项3 -->
                        <div class="diary-card">
                            <div class="flex justify-between items-start mb-2">
                                <h3 class="text-lg font-medium">努力的意义</h3>
                                <span class="text-sm text-gray-500">3天前</span>
                            </div>
                            <p class="text-gray-600 mb-3 line-clamp-2">今天终于完成了一个困扰我很久的项目，虽然过程很艰难，但当看到成果的那一刻，觉得一切都值得。努力的意义，或许就在于此吧。</p>
                            <div class="flex justify-between items-center">
                                <div class="flex items-center space-x-4">
                                    <span class="text-sm text-gray-500"><i class="fas fa-heart text-red-500 mr-1"></i> 36</span>
                                    <span class="text-sm text-gray-500"><i class="fas fa-comment text-blue-500 mr-1"></i> 12</span>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="text-gray-400 hover:text-gray-600 p-1"><i class="fas fa-edit"></i></button>
                                    <button class="text-gray-400 hover:text-gray-600 p-1"><i class="fas fa-trash"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 查看更多 -->
                    <div class="text-center mt-8">
                        <button class="text-green-500 hover:text-green-600 font-medium py-2 px-4 border border-green-200 rounded-full">
                            查看更多日记 <i class="fas fa-chevron-down ml-1"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 我的成就 -->
            <div class="bg-white rounded-xl shadow-md p-6">
                <h2 class="text-xl font-semibold mb-6">我的成就</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <!-- 成就徽章1 -->
                    <div class="text-center p-4 border border-gray-100 rounded-lg">
                        <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-2">
                            <i class="fas fa-seedling text-yellow-500 text-2xl"></i>
                        </div>
                        <h3 class="font-medium text-sm">初心者</h3>
                        <p class="text-xs text-gray-500">发布第一篇日记</p>
                    </div>

                    <!-- 成就徽章2 -->
                    <div class="text-center p-4 border border-gray-100 rounded-lg">
                        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
                            <i class="fas fa-heart text-green-500 text-2xl"></i>
                        </div>
                        <h3 class="font-medium text-sm">暖心使者</h3>
                        <p class="text-xs text-gray-500">获得50个赞</p>
                    </div>

                    <!-- 成就徽章3 -->
                    <div class="text-center p-4 border border-gray-100 rounded-lg">
                        <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
                            <i class="fas fa-comments text-blue-500 text-2xl"></i>
                        </div>
                        <h3 class="font-medium text-sm">交流达人</h3>
                        <p class="text-xs text-gray-500">发表20条点评</p>
                    </div>

                    <!-- 成就徽章4 (未解锁) -->
                    <div class="text-center p-4 border border-gray-100 rounded-lg opacity-50">
                        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-2">
                            <i class="fas fa-lock text-gray-400 text-2xl"></i>
                        </div>
                        <h3 class="font-medium text-sm">公益先锋</h3>
                        <p class="text-xs text-gray-500">兑换10点热力值</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部导航栏 (移动端) -->
    <nav class="md:hidden fixed bottom-0 w-full bg-white shadow-lg border-t border-gray-200">
        <div class="flex justify-around py-3">
            <a href="index.html" class="flex flex-col items-center text-gray-500">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="diary.html" class="flex flex-col items-center text-gray-500">
                <i class="fas fa-pen-to-square text-xl"></i>
                <span class="text-xs mt-1">日记</span>
            </a>
            <a href="drift.html" class="flex flex-col items-center text-gray-500">
                <i class="fas fa-message text-xl"></i>
                <span class="text-xs mt-1">漂流瓶</span>
            </a>
            <a href="profile.html" class="flex flex-col items-center text-green-500">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </nav>

    <script>
        // 选项卡切换功能
        const tabBtns = document.querySelectorAll('.tab-btn');
        tabBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // 移除所有按钮的active状态
                tabBtns.forEach(b => {
                    b.classList.remove('active', 'text-green-500', 'border-b-2', 'border-green-500');
                    b.classList.add('text-gray-500');
                });
                // 添加当前按钮的active状态
                btn.classList.add('active', 'text-green-500', 'border-b-2', 'border-green-500');
                btn.classList.remove('text-gray-500');
                // 这里可以添加内容切换逻辑
            });
        });
    </script>
</body>
</html>